<template>
  <!-- <div class="header">
    <div class="title">危机预警概况</div>

    <button type="button" @click="goToDetail">
      查看详情<van-icon name="arrow" />
    </button>
  </div> -->
  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import {
  ref,
  defineEmits,
  defineProps,
  reactive,
  toRefs,
  watchEffect,
} from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'
import { useBack } from '/@/use/useRouteBack'
import { usePsychologicalSafetyWarning } from '../use/usePsychologicalSafetyWarning'
import { NumData, TotalData } from '../types'
import { useRouter } from 'vue-router'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const router = useRouter()

function goToDetail() {
  router.push({ name: 'TodoDetail', query: { activeNames: 'warn' } })
}

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)

  const { seriesData } = usePsychologicalSafetyWarning({ numData })

  const option = reactive({})

  const option2 = reactive({})

  let series = reactive({
    data: [
      {
        code: '0',
      },
      {
        code: '4',
      },
      {
        code: '5',
      },
    ],
    data2: [
      {
        code: '1',
      },
      {
        code: '2',
      },
      {
        code: '3',
      },
    ],
  })

  watchEffect(() => {
    series.data.map((item) => {
      seriesData.value.map((item2) => {
        if (item.code == item2.code) {
          Object.assign(item, item2)
        }
      })
      return item
    })

    Object.assign(option, {
      legendHoverLink: false,
      grid: {
        height: 200,
      },
      title: {
        // text: '危机预警概况',
        textStyle: {
          color: '#0986b3',
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br />{b}: {c}({d}%)',
      },
      legend: {
        orient: 'horizontal',
        top: '87%',
        textStyle: {
          // color: 'white',
        },
      },
      color: [
        'green',
        // '#FF4500',
        // '#FFA07A',
        // '#FFD700',
        // '#224b8f',
        '#8552a1',
        '#0D8FBF',
        '',
      ],
      series: [
        {
          name: '心理安全预警',
          type: 'pie',
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: series.data,
          labelLine: {
            length: 7,
            length2: 5,
            show: true,
          },
          label: {
            // position: "inside",
            // color: 'white',
            formatter: '{d}%',
          },
        },
      ],
    })
  })
  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');

.chart {
  height: 330px;
}
</style>
